<script setup lang="ts">
import { useLogSys } from "./hook";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import View from "@iconify-icons/ep/view";
import Delete from "@iconify-icons/ep/delete";
import dayjs from "dayjs";
import { debounce } from "@pureadmin/utils";

defineOptions({
  name: "SystemLog"
});
const {
  tabList,
  activeKey,
  loading,
  columns,
  dataList,
  onDetail,
  tabChange,
  onDelete
} = useLogSys();

// 防抖
const _onDetail: any = debounce(
  row => {
    onDetail(row);
  },
  1000,
  true
);
</script>

<template>
  <div class="bg-bg_color p-4">
    <el-tabs v-model="activeKey" @change="tabChange">
      <el-tab-pane
        v-for="(label, name) in tabList"
        :key="name"
        :name="name"
        :label="label"
      />
    </el-tabs>
    <pure-table
      ref="tableRef"
      row-key="id"
      align-whole="center"
      table-layout="auto"
      :loading="loading"
      adaptive
      :adaptiveConfig="{ offsetBottom: 80 }"
      :data="dataList[activeKey]"
      :columns="columns"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
    >
      <template #operation="{ row }">
        <el-button
          v-if="row.size"
          class="reset-margin"
          link
          type="primary"
          :icon="useRenderIcon(View)"
          @click="_onDetail(row)"
        >
          {{ $t("buttons.pureDetail") }}
        </el-button>
        <el-popconfirm title="是否确认删除?" @confirm="onDelete(row)">
          <template #reference>
            <el-button
              v-if="dayjs().format('YYYY-MM-DD') !== row.date"
              class="reset-margin"
              link
              type="danger"
              :icon="useRenderIcon(Delete)"
            >
              {{ $t("buttons.pureDelete") }}
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </pure-table>
  </div>
</template>

<style lang="scss" scoped></style>
